<template>
	<view class="data_main" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<view v-for="(item, index) in dataList" :key="index" class="data-item" @click="$linkTo(`/package/index/circle/prod/index?id=${item.pk_id}`)">
			<view class="img_box" :style="item.templateInfo ? 'height:' + item.templateInfo.imgH + 'px' : ''">
				<image v-if="type" mode="widthFix" :src="item.img" @load="imgLoad($event, item, index)" @error="imgError($event, item, index)"></image>
				<template v-else>
					<u-lazy-load :image="item.templateInfo.errImg || item.img"></u-lazy-load>
				</template>
			</view>
			<view>
				<view class="data-content" :id="'data-' + index">
					<view class="data_title u-line-2">{{ item.name }}</view>
					<view class="data-bottom u-flex u-col-center">
						<u-icon name="e735" size="32" color="#777777" custom-prefix="iconfont"></u-icon>
						<view class="data-business">{{ item.business_name }}</view>
						<u-icon name="e78f" size="32" color="#777777" custom-prefix="iconfont"></u-icon>
						<view class="data-num">{{ item.view_num }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { templateMixin } from './templateMixin.js';
export default {
	mixins: [templateMixin],
	data() {
		return {};
	},
	methods: {},
	filters: {}
};
</script>

<style scoped lang="scss">
.data_main {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.data-item {
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	box-shadow: 0 0 15rpx #eaeaea;
	.img_box {
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	.data-content {
		width: 100%;
		padding: 20rpx;
		word-break: break-all;
		.data_title {
			width: 100%;
			font-size: 30rpx;
			line-height: 40rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 20rpx;
		}
		.data-business,
		.data-num {
			font-size: 24rpx;
			font-weight: 500;
			line-height: 33rpx;
			color: #696969;
		}
		.data-business {
			flex: 1;
			overflow: hidden;
			padding: 0 6rpx;
		}
		.data-icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 14rpx;
		}
	}
}
</style>
